<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表单数据提交</title>
	</head>
	<!--四步: 1.定义div 2.引入JS类库 3.实例化vue对象 4.取值操作 {{}} -->
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构
				案例: 1.input文本输入框
					  2.textarea 文本域
					  3.select下拉框
					  4.radio 单选框
					  5.checkbox复选框
			 -->
			<form action="xxxxx">
				<h1>表单数据提交-数据封装</h1>
				姓名: <input  type="text" v-model="user.username"  /><br>
				详情: <textarea v-model="user.info"></textarea><br>
				<!-- 如果下拉框支持多选 multiple="true"-->
				城市: <select name="city" v-model="user.city" multiple="true">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="成都">成都</option>
			</select><br>
				性别:
				<input type="radio" value="男" name="gender"  v-model="user.gender"/>男
				<input type="radio" value="女" name="gender"  v-model="user.gender"/>女
			</form>
		
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
            const app = new Vue({
                el: '#app',
                data: {
                    user: {
                        username: '',
                        info: '添加用户详情信息',
                        //如果数据单值采用字符串, 如果是多值 采用数组
                        city: ['北京','上海'],
                        gender: '女'
                    }
                },
                methods: {
                }
            })
		</script>
	</body>
</html>